import {computed, defineComponent, onUnmounted, reactive} from 'vue'
import Draw from './draw'
import {useStore} from "vuex";
import {useWebSocketStore} from "@/store/websocket";

export default defineComponent({
  components: {
    Draw,
  },
  setup() {
    const store = useStore()
    const strategy = computed(() => store.getters.currentStrategy) // 策略列表
    const wsStore = useWebSocketStore()

    const cdata = computed(() => ({
      xData: ['太阳能', '风能', '国网', '电池'],
      seriesData: [
        { value: wsStore.cdata[strategy.value].totalSolarPower, name: '太阳能' , itemStyle :{color:'#F9F98C'}},
        { value: wsStore.cdata[strategy.value].totalWindPower, name: '风能' ,itemStyle :{color:'#66CCFF' }},
        { value: wsStore.cdata[strategy.value].totalGridPower, name: '国网' ,itemStyle :{color:'#0ac7c0'}},
        { value: wsStore.cdata[strategy.value].totalBatteryPower, name: '电池',itemStyle :{color:'#FECA04'} },
      ],
    }))

    // onUnmounted(() => {
    //
    // })
    return () => {
      return (
        <div>
          <Draw cdata={cdata.value} />
        </div>
      )
    }
  },
})
